import { createApp } from 'vue'
// 完整引入样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 主题
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/dark/css-vars.scss'

// 导入全局样式
import '@/styles/index.scss'

// 注册unocss
import 'virtual:uno.css'

// 注册全局图标
import { registerIcons } from '@/utils/icons'

// 注册全局自定义svg图标和分页组件
import { registerSvgIcons } from '@/utils/components'

// 外来的svg注册
import 'virtual:svg-icons-register'

// 路由
import router from '@/router/index'

// 权限控制，动态路由
import '@/router/permission'

// 自定义指令
import { directive } from '@/directive/index'

// 实例化pinia 
const pinia = createPinia()

// 页面入口
import App from './App.vue'

const app = createApp(App)

// 注册图标
registerIcons(app)

//注册系定义svg图标插件、分页插件
app.use(registerSvgIcons)

// 注册element-plus，size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级
app.use(ElementPlus, { locale: zhCn, size: 'default', zIndex: 3000 })

// 注册pinia
app.use(pinia)

// 注册路由
app.use(router)

// 注册自定义指令
directive(app)

app.mount('#app')
